<template>
  <Box1 title="基础信息" v-if="data">
    <dv-border-box7 style="overflow: hidden; height: 100%;">
      <el-scrollbar height="320px">
        <el-descriptions :column="2" border style="background: none; overflow: hidden;">
          <template v-for="item in Object.keys(data)" v-bind:key="item">
            <el-descriptions-item v-if="store.schemas[tag][item] && data[item]" :label="store.schemas[tag][item] + '：'"
              label-align="right" label-class-name="label">
              <el-tag type="success"><el-text :title="data[item]" truncated style="max-width: 160px;">{{ data[item]
                  }}</el-text></el-tag>
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-scrollbar>
    </dv-border-box7>
  </Box1>
</template>

<script setup lang="ts">
import Box1 from '@/components/Box1.vue'
import { usePortraitStore } from '@/stores/portrait';
import { useSchemaStore } from '@/stores/schema';
import { nebulaExec } from '@/utils/request';
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const props = defineProps(['tag', 'id'])

const store = usePortraitStore();

const data = ref(null)

async function fetchData() {
  const resp = await nebulaExec(`FETCH PROP ON ${props.tag} "${props.id}" YIELD properties(vertex);`)
  data.value = resp['properties(VERTEX)'][0]
  console.log(resp)
  // if (props.tag == 'person_infom') {
  //   const resp = await nebulaExec(`MATCH (m)-[e:mobile_belongsto]->(v) where id(m) == "${props.id}" return v`)
  //   data.value = resp.v[0].tags[props.tag]
  // } else {
  //   const resp = await nebulaExec(`MATCH (v) where id(v) == "${props.id}" return v`)
  //   data.value = resp.v[0].tags[props.tag]
  // }
}

fetchData()
</script>

<style>
.label {
  background-image: -webkit-linear-gradient(top, rgb(219, 222, 248), rgb(172, 176, 188)) !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
</style>
